<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<title>首页</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="all" th:href="@{/plugins/bootstrap/bootstrap.min.css}" />
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<link rel="stylesheet" type="text/css" href="http://39.107.125.44/arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://39.107.125.44/arcgis_js_api/library/3.16/3.16/esri/css/esri.css" />

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=ESUICaohNGpKKOAx3d2SOzDxuZ2WUMlX&amp;services=&amp;t=20180323171755"></script>
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script th:src="@{/plugins/bootstrap/bootstrap.min.js}"></script>
<script th:src="@{/js/ajaxfileupload/ajaxfileupload.js}"></script>

<script type="text/javascript" src="http://39.107.125.44/arcgis_js_api/library/3.16/3.16/init.js"></script>

<link rel="stylesheet" type="text/css" media="all" th:href="@{/plugins/font-awesome-4.7.0/css/font-awesome.min.css}" />
<link rel="stylesheet" th:href="@{/mobile/common.css}" />
<link rel="stylesheet" th:href="@{/mobile/reset.css}" />
<link rel="stylesheet" th:href="@{/mobile/listView.css}" />
<style type="text/css">
.settingsValue {
	width:100px;
	display:block;
	word-break: break-all;
	word-wrap: break-word;
}

.settingsValue-ta{
	width:100%;
	display:block;
	word-break: break-all;
	word-wrap: break-word;
}

.ui-select{
	margin: 0;
}
.ui-input-text{
	border-width: 0px;
}

.listViewImg-self{
	height: 60px;
	width: 60px;
	float: left;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 15px;
	margin-right: 15px;
}
.listViewImg-self img{
	width: 60px;
	height: 60px;
}

.listViewContent-self{
	width:calc(100% - 90px);
	float: left;
	margin-top:10px;
	height: 60px;
}

.listViewTitle-self{
	font-size: 15px !important;
 	color: #333333;
 	font-weight: 300 !important;
 	margin: 0 !important;
 	width: calc(100% - 20px);
 	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
	color: red;
	font-size: 16px !important;
}

.listViewMemo-self{
 	color: #999999;
 	font-weight: 300 !important;
 	margin: 0 !important;
 	width: calc(100% - 10px);
 	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
  	font-size: 16px !important;
 }
</style>
</head>
<body>
	<div data-role="page" id="pageone">
		<div data-role="header" data-position="fixed" data-tap-toggle="true">
			<span class="fa fa-angle-left goBack"></span>
			<h1>巡检填报</h1>
		</div>
		<div data-role="main" style="background-color: #F5F5F5;"  id="mainContent">
		    <input id="lng" name="lng" type="hidden" />
		    <input id="lat" name="lat" type="hidden" />
		    
			<input id="lng2" name="lng2" type="hidden" />
			<input id="lat2" name="lat2" type="hidden" />
		    
			<input type="hidden" id="identify" th:value="${bussinessId}" />
			<div th:if="${id != ''}">
				<input id="inspectId" name="id" type="hidden" th:value="${id}" />
			</div>
			<!-- 从服务器传递过来的参数 --> 
			<ul data-role="listview" id="inspectProb" data-inset="true" data-listView-theme="a" data-pic-show="true" data-class="hrefClick">
				<li data-role="list-divider" class="list-divider-ui">详细问题</li>
			</ul>
			
			<ul data-role="listview">
				<li>
					<div class="row">
						<div class="col-xs-4 settingsTitle"><span>具体问题</span></div>
						<div class="col-xs-8 ">
							<div class="settingsValue">
								<select id="myselect" name="myselect" data-native-menu="false" multiple="multiple">
									<option value="choose" data-placeholder="true">选择详细问题</option>
								</select>
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-4 settingsTitle"><span>总体情况</span></div>
						<div class="col-xs-8 ">
							<div class="settingsValue">
								<select id="optionId" name="optionId">
									<option th:each="ops:${options}" th:value="${ops.id}" th:text="${ops.title}"></option>
								</select>	
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-4 settingsTitle"><span>巡查内容</span></div>
					</div>
				</li>
				<li style="padding-top: 0; padding-bottom: 0; padding-left: 1em;padding-right: 1em;">
					<div class="row">
						<div class="col-xs-12 ">
							<div class="settingsValue-ta">
								<textarea data-clear-btn="true" type="text" name="remark" id="remark" placeholder="巡查内容"></textarea>	
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-4 settingsTitle"><span>添加图片</span></div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-12 ">
							<div class="settingsValue">
							<a href="javascript: ;" id="fileclick">
								<img src="/wcsi/img/upload.png" id="avatart" style="width: 70px; height: 70xp;" />
							</a>
							<input type="file" id="file_upload" name="file" style="display: none;opacity: 0;" />
							</div>
						</div>
					</div>
				</li>
			</ul>
			<table data-role="table" width="100%" data-mode="columntoggle:none" data-column-btn-theme="e" data-column-popup-theme="c" id="myTable"
				style="background: #FFFFFF;border-top-width: 1px;border-top-color: #ddd;border-top-style: solid;">
				<tbody>
					<tr id="html">
						<td style=" width: 60px;padding-left: 10px !important;">
						<a href="#mapPage" data-transition="slide" class="gotomap">
						<img src="/wcsi/img/mapShow.png" style="width: 40px;height: 40px;"/>
						</a>
						</td>
						<td id="locationDes"
							style="color: #999999; border-bottom: none !important;"></td>
					</tr>
					<tr id="android" style="display: none;">
						<!-- <td style="width: 110px;padding-left: 23px !important;" class="gotomap">定位信息</td> -->
						<td style=" width: 60px;padding-left: 10px !important;">
						<a href="#mapPage" data-transition="slide" class="gotomap">
						<img src="/wcsi/img/mapShow.png" style="width: 40px;height: 40px;"/>
						</a>
						</td>
						<td id="locationDes2"
							style="color: #999999; border-bottom: none !important;"></td>
					</tr>
				</tbody>
			</table>
		</div>

		<div data-role="popup" id="popupView" data-position-to="window"
			class="ui-content" data-theme="a" data-overlay-theme="a"
			data-dismissible="false">
			<div data-role="content">
				<img th:src="@{/img/loading.gif}" />
			</div>
		</div>
		
		<div data-role="footer" data-position="fixed" data-theme="a">
			<center>
				<input id="submitBtn" type="submit" data-inline="false"
					style="background: #F8643F !important; border: 1px solid; border-color:#FA977E; border-radius: 6px !important; color: #FFFFFF; width: 98%; height: 38px;font-size:16px;"
					value="提交"></input>

			</center>
		</div>
	</div>
	<!-- 地图信息 -->
	<div data-role="page" id="mapPage" style='background-color: #F5F5F5; background-size: cover'>
		<div data-role="header" data-tap-toggle="true" data-theme="a">
			<span><a href="#pageone" data-transition="slide" data-direction="reverse" class="pageBack" ><span class="fa fa-angle-left headleft"></span> </a></span>
			<h1>地图信息</h1>
		</div>
		<div data-role="content" style="background: #FFFFFF;height: 100%;">
		<div id="eventmap" ></div>
			<div style="width: 100%;height: 50px;">
				<table data-role="table" width="100%" data-mode="columntoggle:none" style="margin-top: 5px;"
					data-column-btn-theme="e" data-column-popup-theme="c" id="myTable">
					<tbody>
						<tr>
							<td style="width: 110px;padding-left: 23px !important;">定位信息</td>
							<td id="mapLocationDes" style="color: #999999; border-bottom: none !important;word-wrap: break-word"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	
	<!-- 详情面板 -->
	<div data-role="page" data-position="right" id="sPanel"
		data-display="reveal" style='background-color: #F5F5F5; background-size: cover'>
		<div data-role="header" data-tap-toggle="true"
		data-theme="a">
		<h1>详情记录</h1>
		<a href="#pageone" data-transition="slide" data-direction="reverse"
			class="ui-btn ui-btn-a ui-icon-back ui-btn-icon-notext ui-corner-all ui-shadow ui-btn-left">返回面板</a>
		</div>
		<input id="currentId" name="currentId" type="hidden" />
		
		<div data-role="main" style="background-color: #F5F5F5;"  id="mainContent">
			<ul data-role="listview">
				<li>
					<div class="row">
						<div class="col-xs-4 settingsTitle"><span>备注</span></div>
					</div>
				</li>
				<li style="padding-top: 0; padding-bottom: 0; padding-left: 1em;padding-right: 1em;">
					<div class="row">
						<div class="col-xs-12 ">
							<div class="settingsValue-ta" style="width: 100%;">
								<textarea data-clear-btn="true" type="text" name="remarkD" id="remarkD" placeholder="请填写备注" style="width: 90%;"></textarea>
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-4 settingsTitle"><span>添加图片</span></div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-12 ">
							<div class="settingsValue">
							<a href="javascript: ;" id="detailfileclick"> <img
							src="/wcsi/img/upload.png" id="avatartD" style="width: 70px;height: 70px;" /></a>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div data-role="content" style="white-space: nowrap;" align="center">
			<a href="#pageone" data-transition="slide" data-direction="reverse"
				data-inline="true" style="text-decoration: none;"><button
					type="button" data-inline="true"
					style="background: #FFFFFF !important; border: 1px solid; border-color:#D8D8D8; border-radius: 6px !important; color: #555555; width: 48%; height: 38px; font-size: 16px;">&nbsp;关闭&nbsp;</button></a>
			<a href="#pageone"  id="saveBtnT" data-transition="slide"
				data-direction="reverse" data-inline="true"
				style="text-decoration: none;"><button type="button" data-inline="true"
				style="background: #F8643F !important; border: 1px solid; border-color:#FA977E; border-radius: 6px !important; color: #FFFFFF; width: 48%; height: 38px;font-size:16px;">&nbsp;保存&nbsp;</button></a>
		</div>
	</div>
	<script th:src="@{/js/mapcoordinate.js}"></script>
	<script th:src="@{/mobile/event/map.js}"></script>
	<script th:src="@{/mobile/common.js}"></script>
	<script th:src="@{/mobile/bussinessInspection/saveOrUpdateOnPhone.js}"></script>
	<script th:inline="javascript">
		window.rootPath= /*[[${#httpServletRequest.getContextPath()}]]*/
	</script>
</body>
</html>